<template>
    <div id="orderAdd" class="content">
        <!-- 页面标题 -->
        <div class="tilte-bar">新增委托</div>
        <div>
            <!-- 用户填写信息 -->
            <div class="weui-cell weui-cell-background-color">
                <div class="weui-cell__hd"><label class="weui-label">业务员：</label></div>
                <div class="weui-cell__bd">
                    <div class="weui-cell__hd_1">
                        <select class='weui-select' v-model="addOrderInfo.salesman_name">
                            <option disabled value="">请选择</option>
                            <option v-for="man in salesmanList" :value="man.userId">{{man.userName}}</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="weui-cell weui-cell-background-color">
                <div class="weui-cell__hd"><label class="weui-label">委托单位：</label></div>
                <div class="weui-cell__bd">
                    <input class="weui-input" type="text" v-model="addOrderInfo.order_org" placeholder="请输入委托单位">
                </div>
            </div>
            <div class="weui-cell weui-cell-background-color">
                <div class="weui-cell__hd"><label class="weui-label">经办人：</label></div>
                <div class="weui-cell__bd">
                    <input class="weui-input" type="text" v-model="addOrderInfo.applicant_name" placeholder="请输入经办人">
                </div>
            </div>
            <div class="weui-cell weui-cell-background-color">
                <div class="weui-cell__hd"><label class="weui-label">经办人电话：</label></div>
                <div class="weui-cell__bd">
                    <input class="weui-input" type="text" v-model="addOrderInfo.applicant_phonenum" placeholder="请输入经办人电话(必填)">
                </div>
            </div>
            <div class="weui-cell weui-cell-background-color">
                <div class="weui-cell__hd"><label class="weui-label">传真：</label></div>
                <div class="weui-cell__bd">
                    <input class="weui-input" type="text" v-model="addOrderInfo.check_phonenum" placeholder="请输入传真">
                </div>
            </div>
            <div class="weui-cell weui-cell-background-color">
                <div class="weui-cell__hd"><label class="weui-label">使用单位：</label></div>
                <div class="weui-cell__bd">
                    <input class="weui-input" type="text" v-model="addOrderInfo.device_use_org" placeholder="请输入使用单位">
                </div>
            </div>
            <!-- <div class="weui-cell weui-cell-background-color">
                <div class="weui-cell__hd"><label class="weui-label">使用单位联系人：</label></div>
                <div class="weui-cell__bd">
                    <input class="weui-input" type="text" v-model="addOrderInfo.use_contactor" placeholder="请输入使用单位联系人">
                </div>
            </div>
            <div class="weui-cell weui-cell-background-color">
                <div class="weui-cell__hd"><label class="weui-label">使用单位联系人电话：</label></div>
                <div class="weui-cell__bd">
                    <input class="weui-input" type="text" v-model="addOrderInfo.use_phone_number" placeholder="请输入使用单位联系人电话">
                </div>
            </div> -->
            <div class="weui-cell weui-cell-background-color">
                <div class="weui-cell__hd"><label class="weui-label">安装单位：</label></div>
                <div class="weui-cell__bd">
                    <input class="weui-input" type="text" v-model="addOrderInfo.device_install_org" placeholder="请输入安装单位">
                </div>
            </div>
            <!-- <div class="weui-cell weui-cell-background-color">
                <div class="weui-cell__hd"><label class="weui-label">安装单位联系人：</label></div>
                <div class="weui-cell__bd">
                    <input class="weui-input" type="text" v-model="addOrderInfo.install_contactor" placeholder="请输入安装单位联系人">
                </div>
            </div>
            <div class="weui-cell weui-cell-background-color">
                <div class="weui-cell__hd"><label class="weui-label">安装单位电话：</label></div>
                <div class="weui-cell__bd">
                    <input class="weui-input" type="text" v-model="addOrderInfo.install_phone_number" placeholder="请输入安装单位电话">
                </div>
            </div> -->
            <div class="weui-cell weui-cell-background-color">
                <div class="weui-cell__hd"><label class="weui-label">付款方式：</label></div>
                <div class="weui-cell__bd">
                    <input class="radio-style" type="radio" id="cash" value="1" v-model="addOrderInfo.payment_type"><label class="radio-lable-style" for="现金">现金</label>
                    <input class="radio-style" type="radio" id="check" value="2" v-model="addOrderInfo.payment_type"><label class="radio-lable-style" for="支票">支票</label>
                    <input class="radio-style" type="radio" id="transfer" value="3" v-model="addOrderInfo.payment_type"><label class="radio-lable-style" for="转账">转账</label>
                </div>
            </div>
            <div class="weui-cell weui-cell-background-color">
                <div class="weui-cell__hd"><label class="weui-label">报告领取方式：</label></div>
                <div class="weui-cell__bd">
                    <input class="radio-style" type="radio" id="ziqu" value="1" v-model="addOrderInfo.get_report_type"><label class="radio-lable-style" for="自取">自取</label>
                    <input class="radio-style" type="radio" id="youji" value="2" v-model="addOrderInfo.get_report_type"><label class="radio-lable-style" for="邮寄">邮寄</label>
                </div>
            </div>
            <div class="weui-cell weui-cell-background-color">
                <div class="weui-cell__hd"><label class="weui-label">期望检验员：</label></div>
                <div class="weui-cell__bd">
                    <div class="checkbox-wrap" v-for="(name, index) in checkerLoginnamesList">
                        <input type="checkbox" :id="index" :value="name.userName" v-model="picker">
                        <label :for="index">{{name.userName}}</label>
                    </div>
                    
                    <!-- <input class="weui-input" type="text" v-model="addOrderInfo.checker_loginnames" placeholder="请输入期望检验员"> -->
                </div>
            </div>
            <!-- 选择日期-->
            <div class="weui-cell weui-cell-background-color">
                <div class="weui-cell__hd"><label class="weui-label">期望检验日期：</label></div>
                <div class="weui-cell__bd">
                    <input class="" type="date" v-model='addOrderInfo.checkDate_expect'>
                    <!-- weui-input weui-input-date -->
                </div>
            </div>
            <div class="weui-cell weui-cell-background-color">
                <div class="weui-cell__hd"><label class="weui-label">检验方联系人：</label></div>
                <div class="weui-cell__bd">
                    <div class="weui-cell__hd_1">
                        <select class='weui-select' v-model="addOrderInfo.contactPersonName">
                            <option disabled value="">请选择</option>
                            <option v-for="man in contactPersonList" :value="man.userName">{{man.userName}}</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="weui-cell weui-cell-background-color">
                <div class="weui-cell__hd"><label class="weui-label">收款机构：</label></div>
                <div class="weui-cell__bd">
                    <span class="weui-input">深圳市金鼎安全技术有限公司</span>
                </div>
            </div>
            <div class="weui-cell weui-cell-background-color">
                <div class="weui-cell__hd"><label class="weui-label">工程名称：</label></div>
                <div class="weui-cell__bd">
                    <input class="weui-input" type="text" v-model="addOrderInfo.project_name" placeholder="请输入工程名称">
                </div>
            </div>
            <div class="weui-cell weui-cell-background-color">
                <div class="weui-cell__hd"><label class="weui-label">工程地址：</label></div>
                <div class="weui-cell__bd">
                    <div class="weui-cell__hd_1">
                        <select class='weui-select' v-model="provinceSelected">
                            <option disabled value="">请选择</option>
                            <option v-for="(province, index) in provinceList" :value="index">{{province}}</option>
                        </select>
                    </div>
                    <div class="weui-cell__hd_1">
                        <select class='weui-select' v-model="citySelected">
                            <option disabled value="">请选择</option>
                            <option v-for="(city, index) in cityList" :value="index">{{city}}</option>
                        </select>   
                    </div>
                    <div class="weui-cell__hd_1">
                        <select class='weui-select' v-model="addOrderInfo.area">
                            <option disabled value="">请选择</option>
                            <option v-for="area in areaList" :value="area">{{area}}</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="weui-cell weui-cell-background-color">
                <div class="weui-cell__hd"><label class="weui-label">工程详细地址：</label></div>
                <div class="weui-cell__bd">
                    <input class="weui-input" type="text" v-model="addOrderInfo.project_address" placeholder="请输入工程详细地址">
                </div>
            </div>
            <!-- 下一步按钮 -->
            <div>
                <div v-if="warnningTag" class="button-warnning">{{warnningMessage}}</div>
                <div></div>
                <span class="weui-btn weui-btn_primary margin-1" @click="submitOrder">下一步</span>
            </div>
        </div>
    </div>
</template>

<script>
    let phone = 12345678;
    export default {
        data () {
            return {
                picker:[],
                //省，市，镇
                provinceSelected: '', citySelected: '', areaSelected: '',
                //业务员列表
                salesmanList: [],
                // 期望检验员
                checkerLoginnamesList: [
                    // {userName: '张1'},
                    // {userName: '张2'},
                    // {userName: '张3'},
                    // {userName: '张4'},
                    // {userName: '张5'},
                    // {userName: '张6'},
                    // {userName: '张7'},
                    // {userName: '张8'},
                    // {userName: '张9'},
                    // {userName: '张0'},
                    // {userName: '张11'},
                    // {userName: '张12'}
                ],
                //检验方联系人
                contactPersonList: [],
                // 新增订单信息
                addOrderInfo: {
                    salesman_name: "",
                    order_org: "",
                    applicant_name: "",
                    applicant_phonenum: "",
                    check_phonenum: "",
                    device_use_org: "",
                    // use_contactor: "",
                    // use_phone_number: "",
                    device_install_org: "",
                    // install_contactor: "",
                    // install_phone_number: "",
                    payment_type: "",
                    get_report_type: "",
                    checker_loginnames: "",
                    checkDate_expect: "",
                    contactPersonName: "",
                    project_name: "",
                    project_address: "",
                    province: "",
                    city: "",
                    area: ""
                },
                warnningTag: false,
                warnningMessage: "",
                //用户选择省、市、镇地址列表
                provinceList: [],
                cityList: [],
                areaList: [],
            }
        },
        mounted () {
            // 清空orderDetails和deviceList
            if(window.localStorage.orderDetails) {
                window.localStorage.orderDetails = "";
            }
            if(window.localStorage.deviceList) {
                window.localStorage.deviceList = "";
            }
            this.getSelectList();
            this.showProvince();
        },
        watch: {
            //根据用户选择的省份来显示市
            provinceSelected: function() {
                let _self = this;
                _self.citySelected = '';
                _self.addOrderInfo.area = '';
                _self.cityList = [];
                _self.areaList = [];
                let citys = _self.GLOBAL.CITYS[_self.provinceSelected].city;
                for( let i=0; i<citys.length; i++ ) {
                    _self.cityList.push(citys[i].name);
                }
            },
            //根据用户选择的市来显示镇
            citySelected: function() {
                let _self = this;
                _self.addOrderInfo.area = '';
                _self.areaList = [];
                if(_self.citySelected !== '') {
                    let citys = _self.GLOBAL.CITYS[_self.provinceSelected].city[_self.citySelected].area;
                    for( let i=0; i<citys.length; i++ ) {
                        _self.areaList.push(citys[i]);
                    }
                }
            },
        },
        methods: {
            // 提交订单
            submitOrder: function() {
                let _self = this; 
                _self.warnningTag = false;
                let i = 0;
                // 判断用户是否填了经办人电话或格式错误
                let phoneNumber = _self.addOrderInfo.applicant_phonenum;
                if( (!phoneNumber) || (!_self.isPhoneNumber(phoneNumber)) ) {
                    _self.warnningTag = true;
                    _self.warnningMessage = "经办人电话或格式错误";
                } else {
                    //如果填了省填到_self.addOrderInfo中
                    if((typeof(_self.provinceSelected)==="number")) {
                        _self.addOrderInfo.province = _self.GLOBAL.CITYS[_self.provinceSelected].name;
                        if((typeof(_self.citySelected)==="number")) {
                            _self.addOrderInfo.city = _self.GLOBAL.CITYS[_self.provinceSelected].city[_self.citySelected].name;
                        }
                    }
                    // 如果填了期望检验员,拼接成字符串
                    if(_self.picker.length) {
                        for(let i = 0; i < _self.picker.length; i++) {
                            _self.addOrderInfo.checker_loginnames += _self.picker[i];
                            if( i !== (_self.picker.length-1) ) {
                                _self.addOrderInfo.checker_loginnames += ',';
                            }
                        }
                    }
                    // 如果填了业务员，则将salesman_name替换为对象
                    if(_self.addOrderInfo.salesman_name) {
                        for(let i = 0; i < _self.salesmanList.length; i++) {
                            if(_self.salesmanList[i].userId === _self.addOrderInfo.salesman_name) {
                                _self.addOrderInfo.salesman_name = _self.salesmanList[i];
                            }
                        }
                    }
                    // 如果填了有关电话的选项，需校验
                    // debugger
                    if(_self.addOrderInfo.use_phone_number && !(_self.isPhoneNumber(_self.addOrderInfo.use_phone_number))) {
                        _self.warnningTag = true;
                        _self.warnningMessage = "使用单位联系人电话格式错误";
                    } else {
                        if(_self.addOrderInfo.install_phone_number && !_self.isPhoneNumber(_self.addOrderInfo.install_phone_number)) {
                            _self.warnningTag = true;
                            _self.warnningMessage = "安装单位话格式错误";
                        } else {
                            // 订单信息存到localStorage中
                            window.localStorage.orderDetails = JSON.stringify(_self.addOrderInfo);
                            window.localStorage.deviceList = JSON.stringify([]);
                            window.location.href = './#/dev_main/list_add';
                        }
                    }
                }
            },
            // 判断是否为电话
            isPhoneNumber: function( num ) {
                // TODO:正则表达式有问题
                let regx = /[0-9-()（）]{7,18}/;
                if( regx.test(num) ) {
                    return true;
                } else {
                    return false;
                }
            },
            //页面初始化时，填充表单
            getSelectList: function() {
                let _self = this;
                _self.$http({
                    method: 'post',
                    url: 'salesmanList'
                }).then( response => {
                    _self.salesmanList = response.data.data;
                });
                _self.$http({
                    method: 'post',
                    url: 'contactPersonList'
                }).then( response => {
                    _self.contactPersonList = response.data.data;
                })
                // 填充经办人名字和电话
                // _self.$http({
                //     method: 'post',
                //     url: 'phonenumCheck',
                //     data: {
                //             userId: localStorage.userId
                //     }
                // }).then( response => {
                //     let data = response.data.data;
                //     _self.addOrderInfo.applicant_phonenum = data.phonenum;
                //     _self.addOrderInfo.applicant_name = data.name;
                // })
                // 填充委托单位或经办人
                _self.$http({
                    method: 'post',
                    url: 'getName',
                    data: {
                            userId: localStorage.userId
                    }
                }).then( response => {
                    let data = response.data.data;
                    _self.addOrderInfo.applicant_name = data.user_name;
                    _self.addOrderInfo.applicant_phonenum = data.phonenum;
                    if(data.type === "委托单位") {
                        _self.addOrderInfo.order_org = data.org_name;
                    }
                })
                // 填充期待检验员
                _self.$http({
                    method: 'post',
                    url: 'checkmanList',
                }).then( response => {
                    _self.checkerLoginnamesList = response.data.data;
                })
            },
            //渲染省份列表
            showProvince: function() {
                let _self = this;
                let citys = _self.GLOBAL.CITYS;
                for( let i=0; i<citys.length; i++ ) {
                    _self.provinceList.push(citys[i].name)
                }
            },
        }
    }
</script>

<style scoped>
    *{
        box-sizing: border-box;
    }
    .info-row span {
        width: 35%
    }
    .margin-1 {
        margin: 1rem;
    }
    select {
        border: 0;
        outline: 0;
        max-width: 11rem;
    }
    .radio-style {
        height: 1rem;
        width: 1rem;
        vertical-align: middle;
    }
    .radio-lable-style {
        vertical-align: middle;
        padding: 0 .3rem;
    }
    .time-wrap {
        display: inline-block;
        height: 100%;
        width: 7rem;
        vertical-align: top;
        line-height: 2rem;
        text-align: left;
        padding-left: .5rem;
    }
    .select-tab-2 {
        display: inline-block;
        border: .05rem solid #dcdcdc;
        height: 100%;
        width: 70%;
        text-align: right;
        margin-left: 1rem;
    }
    .weui-input-date {
        margin-left: .3rem;
        /* border: 0; */
    }
    .checkbox-wrap {
        display: inline-block;
        width: 33%;
    }
</style>